<template>
	<view class="content">
		<view class="top">
			<swiper autoplay="true" interval="3000" indicator-dots="true" circular="true">
			  <swiper-item>
			  		<image src="/static/images/paotui.png"/>
			   </swiper-item>
			   <swiper-item>
			  		<image src="/static/images/tu1.png" />
			   </swiper-item>
			   <swiper-item>
			  		<image src="/static/images/tu2.png" />
			   </swiper-item>
			</swiper>
		</view>
		
		<view class="mid">
			<view class="title">
				<image class="logo" src="/static/images/tongzhi.png"/>
				<span class="wenzi">重要通知！！！！</span>
			</view>
			<div class="container">
			  <div class="row">
			    <div class="item">
			      <img src="/static/images/tupian1.png" alt="Icon 1">
			      <p>快递代取</p>
			    </div>
			    <div class="item" @click="toErrands">
			      <img src="/static/images/tupian2.png" alt="Icon 2">
			      <p>校园跑腿</p>
			    </div>
			    <div class="item">
			      <img src="/static/images/tupian3.png" alt="Icon 3">
			      <p>快递代寄</p>
			    </div>
			  </div>
			  <div class="row">
			    <div class="item">
			      <img src="/static/images/tupian4.png" alt="Icon 4">
			      <p>租借服务</p>
			    </div>
			    <div class="item">
			      <img src="/static/images/tupian5.png" alt="Icon 5">
			      <p>游戏陪玩</p>
			    </div>
			    <div class="item1">
			      <img src="/static/images/tupian6.png" alt="Icon 5">
			      <p>帮我送 </p>
			    </div>
			  </div>
			</div>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello'
			}
		},
		onLoad() {

		},
		methods: {
			toErrands(){
				uni.navigateTo({
					url:"/pages/errands/errands"
				})
			}

		},
		created() {
			
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		// background-color: #eee;
		// width:100%;
		// height:100vh;
	}
	swiper{
		width:100%;
		height: 390rpx;
		
	}
	swiper image{
		width:100%;
		height: 400rpx;
	}

	.mid{
		width: 100%;
		padding-top: 10px;
		background-color: #eee;
		// background-color: red;
		// display: flex;
		// flex-wrap: wrap;
		// justify-content: space-around;
		// height:300px;
		// // background: skyblue;
	.title{
		// background-color: red;
		width: 90%;
		height:30px;
		// margin-top: 30px;
		margin:0 auto 10px;

		// padding: 5rpx;
		background-color: white;
		display: flex;
		border-radius: 8px;
	}
	.logo{
		width:20px;
		height:20px;
		margin-top: 5px;
		margin-left: 8px;
	}
	.wenzi{
		font-size: 14px;
		margin-top: 5px;
		margin-left: 8px;
	}
	.container {
		// display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
		height:238px;
		display: flex;
		flex-direction: column;
	}
	
	.row {
	  display: flex;
	  justify-content: space-around;
	  margin-bottom: 20px;
	}
	
	.item {
	  text-align: center;
	  padding: 10px;
	  background-color: #f9f9f9;
	  border-radius: 10px;
	  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	}
	
	.item img {
	  width: 50px;
	  height: 45px;
	  /* border-radius: 50%; */
	  margin-bottom: 10px;
	}
	
	.item p {
	  font-size: 14px;
	  color: #333;
	}
	.item1 {
	  text-align: center;
	  padding: 10px;
	  background-color: #f9f9f9;
	  border-radius: 10px;
	  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	}
	.item1 img {
	  width: 50px;
	  height: 45px;
	  /* border-radius: 50%; */
	  margin-bottom: 10px;
	}
	}
</style>
